import React from "react";
import { Stack, Button } from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
import EmailIcon from "@mui/icons-material/Email";
import { signIn } from "next-auth/react";
import EmailDialog from "./EmailDialog";
import toast from "react-hot-toast";

const OAuthPanel = () => {
  const [open, setOpen] = React.useState(false);
  const [email, setEmail] = React.useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };
  const emailDialog = {
    open,
    onChange(e) {
      setEmail(e.target.value);
    },
    handleClose() {
      setOpen(false);
    },
    handleSendEmail() {
      toast.promise(signIn("email", { email, callbackUrl: "/" }), {
        loading: "正在发送邮件",
        success: "已发送，请您查看邮箱",
        error: (e) => "除了的小问题等会在试试吧 " + e,
      });
      setOpen(false);
    },
  };

  return (
    <Stack direction="row" spacing={2} sx={{ pt: 4 }}>
      <Button
        onClick={() => {
          signIn("github", { callbackUrl: "/auth/new-user" });
        }}
        aria-label="sign-up-github"
        size="large"
        startIcon={<GitHubIcon />}
        variant="contained"
      >
        Github
      </Button>
      <Button
        onClick={handleClickOpen}
        aria-label="sign-up-email"
        size="large"
        startIcon={<EmailIcon />}
        variant="contained"
      >
        Email
      </Button>
      <EmailDialog {...emailDialog} />
    </Stack>
  );
};

export default OAuthPanel;
